<template>
	<div class="ai-speak-input-wrapper">
		<!-- 实时拟合模式下 模板 -->
		<NormalSpeakInput v-if="videoType === 'real-time-fitting' || videoType === 'no-video' || videoType === 'video-switching'" />
		<!-- 预录制模式 视频原声模板 -->
		<PrerecordNativeVideoInput v-if="videoType === 'pre-recorded-video' && audioType === 'video-native'" :label="label" :prop="prop" :required="required" @input="input" />
		<!-- 预录制模式 TTS模板 -->
		<PrerecordTtsInput v-if="videoType === 'pre-recorded-video' && audioType === 'tts'" :label="label" :prop="prop" :required="required" @input="input" />
		<!-- <el-form-item :label="label" v-if="videoType === 'pre-recorded-video' && audioType === 'tts'" :required="required" :prop="prop">
			<el-input
				:value="value"
				:disabled="showDetail"
				:placeholder="placeholder"
				:maxlength="maxlength"
				@input="updateValue"
				@change="onChange"
				:id="prop"
				:class="audioType === 'tts' ? 'tts-input' : ''"
			>
			</el-input>
			<template v-if="video">
				<div class="tts-video">
					<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
						<span v-if="video.fileName.length > 6">{{ video.fileName | flieOmit(6, -1) }}</span>
						<span v-else>{{ video.fileName }}</span>
						<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
					</el-button>
					<span class="close" @click="clearVideo">x</span>
				</div>
			</template>
			<template v-if="showVideoIcon && !video">
				<div class="ai-video" @click="showVideoTable">
					<img :src="videoIcon" alt="" srcset="" />
				</div>
			</template>
			<el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable" v-if="!showDetail && variableIcon"></el-button>
		</el-form-item> -->
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow';
import PrerecordNativeVideoInput from './PrerecordNativeVideoInput.vue';
import NormalSpeakInput from './NormalSpeakInput.vue';
import PrerecordTtsInput from './PrerecordTtsInput .vue';
import aivideoErrorImg from '@bpmn/assets/img/aivideoError.png';

export default {
	components: {
		PrerecordNativeVideoInput,
		PrerecordTtsInput,
		NormalSpeakInput
	},
	props: {
		mode: {
			type: String,
			default: () => ''
		},
		label: {
			type: String,
			default: () => 'AI说'
		},
		placeholder: {
			type: String,
			default: () => '请编辑AI客服播报的话术'
		},
		maxlength: {
			type: Number,
			default: () => 140
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		video: {
			type: [Object || null],
			default: () => {}
		},
		variableIcon: {
			type: Boolean,
			default: () => true
		},
		required: {
			type: Boolean,
			default: () => false
		},
		prop: {
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		videoIcon: {
			type: String,
			default: () => ''
		},
		taskId: {
			type: String,
			default: () => '',
			required: false
		}
	},

	computed: {
		showVideoIcon() {
			const ignore = ['hangup', 'transfer'];
			return !AIWorkflow.getNumberTypeProperty(this.prop) && ignore.indexOf(AIWorkflow.getTalkId(this.taskId)) === -1;
		},
		isRequired() {
			const ignore = ['messageCollect'];
			return ignore.indexOf(AIWorkflow.getTalkId(this.taskId)) === -1;
		}
	},
	data() {
		return {
			videoType: null,
			audioType: null,
			// aivideo: require('@bpmn/assets/img/aivideo.png'),
			errorVideo: aivideoErrorImg
		};
	},
	mounted() {
		const { videoType = null, audioType = null } = AIWorkflow.getRobotProperty();
		console.log(videoType, audioType);

		this.videoType = videoType;
		this.audioType = audioType;
		// console.warn(this.showVideoIcon, this.video);
	},
	methods: {
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		},
		showVideoTable() {
			this.$emit('showVideoTable', this.prop);
		},
		updateValue(e) {
			console.log(e);
			this.$emit('updateValue', this.prop, e);
		},
		onChange() {
			this.$emit('onChange', this.prop);
		},
		clearVideo() {
			this.$emit('clearVideo', this.prop);
		}
	}
};
</script>
